<template>
  <div>
    <Tabs :value="shouru" ref="tabsDefaultValue" name="secondBox" @on-click="memberInfoChange">
      <TabPane label="收入" name="shouru" tab="secondBox">
        <Row>
          <Form
            ref="searchForm"
            :model="shouruSearchForm"
            inline
            :label-width="70"
            class="search-form"
          >
            <Form-item label="收入类型" prop="start">
              <Select
                v-model="shouruSearchForm.start"
                placeholder="请选择"
                clearable
                style="width: 200px"
              >
                <Option value="MEMBERCOMMISSION">充值</Option>
                <Option value="CONSUMPTIONCOMMISSION">转账</Option>
                <Option value="REFUND">会员费</Option>
              </Select>
            </Form-item>
            <Form-item label="收入时间">
              <DatePicker
                v-model="selectDate"
                type="datetimerange"
                format="yyyy-MM-dd"
                clearable
                @on-change="selectDateRangeShouru"
                placeholder="选择起始时间"
                style="width: 300px"
              ></DatePicker>
            </Form-item>
            <Button
              @click="shouruData"
              type="primary"
              icon="ios-search"
              class="search-btn"
              >搜索</Button
            >
            <Button
              class="search-btn"
              type="primary"
              @click="handleReset(shouru)"
              >重置</Button
            >
            <download-excel
              class="export-excel-wrapper"
              :data="receiptRecordData"
              :fields="fields"
              :fetch="exportOrder"
              name="推广钱包-收入.xls"
            >
              <Button type="info" class="export"> 导出 </Button>
            </download-excel>
            <div class="totleQuota">
                <p>
                  金额<span>{{ IncomeByPageCount.sumFlowPrice?IncomeByPageCount.sumFlowPrice:0 }}</span>
                </p>
                <p>
                  分佣焕贝额<span>{{ IncomeByPageCount.sumMoney?IncomeByPageCount.sumMoney:0 }}</span>
                </p>
              </div>
          </Form>
        </Row>
        <Table
          :loading="loading"
          border
          :columns="shouruColumns"
          :data="receiptRecordData"
          class="mt_10"
          ref="table"
        >
          <template slot="orderSnSlot" slot-scope="scope">
            <a @click="orderDetail(scope.row.orderSn)">{{
              scope.row.orderSn
            }}</a>
          </template>
        </Table>

        <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
          <Page
            :current="receiptRecordSearchForm.pageNumber"
            :total="receiptRecordTotal"
            :page-size="receiptRecordSearchForm.pageSize"
            @on-change="shouruChangePage"
            @on-page-size-change="shouruChangePageSize"
            :page-size-opts="[10, 20, 50, 100]"
            size="small"
            show-total
            show-elevator
            show-sizer
          ></Page>
        </Row>
      </TabPane>
      <TabPane label="支出" name="zhichu" tab="secondBox">
        <Row>
          <Form
            ref="searchForm"
            :model="shouruSearchForm"
            inline
            :label-width="70"
            class="search-form"
          >
            <Form-item label="支出类型" prop="start">
              <Select
                v-model="shouruSearchForm.start"
                placeholder="请选择"
                clearable
                style="width: 200px"
              >
                <Option value="TRANSFER">转账</Option>
                <Option value="OFFLINE">线下订单</Option>
                <Option value="NORMAL">线上订单</Option>
                <Option value="VIRTUAL">虚拟订单</Option>
                <Option value="WITHDRAWAL">提现</Option>
              </Select>
            </Form-item>
            <Form-item label="支出时间">
              <DatePicker
                v-model="selectDate"
                type="datetimerange"
                format="yyyy-MM-dd"
                clearable
                @on-change="selectDateRangeShouru"
                placeholder="选择起始时间"
                style="width: 300px"
              ></DatePicker>
            </Form-item>
            <Button
              @click="zhichu"
              type="primary"
              icon="ios-search"
              class="search-btn"
              >搜索</Button
            >
            <Button
              class="search-btn"
              type="primary"
              @click="handleReset(zhichu)"
              >重置</Button
            >
             <download-excel
              class="export-excel-wrapper"
              :data="receiptRecordData"
              :fields="zhichuFields"
              :fetch="exportOrderZC"
              name="推广钱包-支出.xls"
            >
              <Button type="info" class="export"> 导出 </Button>
            </download-excel>
            <div class="totleQuota">
                <p>
                  焕贝额<span>{{ IncomeByPageCount.sumMoney?IncomeByPageCount.sumMoney:0 }}</span>
                </p>
                <p>
                  手续费<span>{{ IncomeByPageCount.sumHandlingMoney?IncomeByPageCount.sumHandlingMoney:0 }}</span>
                </p>
                <p>
                  对应现金额<span>{{ IncomeByPageCount.sumRealMoney?IncomeByPageCount.sumRealMoney:0 }}</span>
                </p>
              </div>
          </Form>
        </Row>
        <Table
          :loading="loading"
          border
          :columns="zhichuColumns"
          :data="receiptRecordData"
          class="mt_10"
          ref="table"
        >
          <template slot="orderSnSlot" slot-scope="scope">
            <a @click="orderDetail(scope.row.orderSn)">{{
              scope.row.orderSn
            }}</a>
          </template>
        </Table>

        <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
          <Page
            :current="receiptRecordSearchForm.pageNumber"
            :total="receiptRecordTotal"
            :page-size="receiptRecordSearchForm.pageSize"
            @on-change="zhichuChangePage"
            @on-page-size-change="zhichuChangePageSize"
            :page-size-opts="[10, 20, 50, 100]"
            size="small"
            show-total
            show-elevator
            show-sizer
          ></Page>
        </Row>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import region from "@/views/lili-components/region";
import * as API_Member from "@/api/member.js";
import ossManage from "@/views/sys/oss-manage/ossManage";
import liliMap from "@/views/my-components/map/index";
import JsonExcel from "vue-json-excel";
import * as RegExp from "@/libs/RegExp.js";
import * as API_Order from "@/api/order.js";

export default {
  name: "tuiguang",
  components: {
    region,
    ossManage,
    "download-excel": JsonExcel,
    liliMap,
  },
  watch:{
    walletType:{
      handler(v){
      }
    }
  },
  props: {
    memberId: {
      type: String,
    },
    walletType:{
      type:String
    }
  },
  data() {
    return {
      // 收入表格的表头以及内容
      fields: {
        会员昵称: "nickName",
        手机号码: {
          field: "mobile",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        级别: "gradeName",
        区域: {
          field: "locationName",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        流水号: "receivableNo",
        收入时间: {
          field: "incomeTime",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        收入类型:"incomeTypeName",
        焕贝金额: {
          field: "flowPrice",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        分佣焕贝额: {
          field: "money",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
      },
       //支出表格的表头以及内容
      zhichuFields:{
        会员昵称: "nickName",
        手机号码: {
          field: "mobile",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        级别: "gradeIdName",
        区域: {
          field: "locationName",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        流水号: "receivableNo",
        支出时间:  {
          field: "expenditureTime",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        支出类型: "expenditureTypeName",
        焕贝额: {
          field: "money",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        手续费: {
          field: "handlingMoney",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        对应现金额: {
          field: "realMoney",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
        提现折扣: {
          field: "fee",
          callback: (value) => {
            return "&nbsp;" + value;
          },
        },
      },
      shouru:'shouru',
      id: "", //会员id
      loading: true, // 表单加载状态
      selectDate: null, // 选择时间段
      shouruSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        memberId: this.memberId,
        owner:this.walletType,
        start: "",
        startDate: "",
        endDate: "",
      }, //充值钱包收入
      shouruColumns: [
        {
          title: "序号",
          type: "index",
        },
        {
          title: "会员昵称",
          key: "nickName",
          width: 150,
        },
        {
          title: "手机号码",
          key: "mobile",
          tooltip: true,
        },
        {
          title: "级别",
          key: "gradeIdName",
          tooltip: true,
        },
        {
          title: "区域",
          key: "locationName",
          width: 250,
        },
        {
          title: "流水号",
          key: "receivableNo",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "收入时间",
          key: "incomeTime",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "收入类型",
          key: "incomeTypeName",
          tooltip: true,
          width: "100",
        },
        {
          title: "焕贝金额",
          key: "flowPrice"
        },
        {
          title: "分佣焕贝额",
          key: "money"
        }
        
      ], //充值钱包-收入
      zhichuColumns: [
        {
          title: "序号",
          type: "index",
        },
        {
          title: "会员昵称",
          key: "nickName",
          width: 150,
        },
        {
          title: "手机号码",
          key: "mobile",
          tooltip: true,
        },
        {
          title: "级别",
          key: "gradeIdName",
          tooltip: true,
        },
        {
          title: "区域",
          key: "locationName",
          width: 250,
        },
        {
          title: "流水号",
          key: "receivableNo",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "支出时间",
          key: "expenditureTime",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "支出类型",
          key: "expenditureTypeName",
          tooltip: true,
          width: "100"
        },
        {
          title: "焕贝额",
          key: "money",
          render: (h, params) => {
            return h(
              "div",
              this.$options.filters.unitPrice(params.row.money, "焕贝")
            );
          },
        },
        {
          title: "手续费",
          key: "handlingMoney",
          render: (h, params) => {
            return h(
              "div",
              this.$options.filters.unitPrice(params.row.handlingMoney, "焕贝")
            );
          },
        },
        {
          title: "对应现金额",
          key: "realMoney",
          render: (h, params) => {
            return h(
              "div",
              this.$options.filters.unitPrice(params.row.realMoney, "焕贝")
            );
          },
        },
        {
          title: "提现折扣",
          key: "fee",
          render: (h, params) => {
            return h(
              "div",
              this.$options.filters.unitPrice(params.row.fee, "")
            );
          },
        },
      ], //充值钱包-支出
      receiptRecordData: [],
      receiptRecordTotal: 0, //发票记录总条数
      receiptRecordSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        start: "",
        startDate: "",
        endDate: "",
      },
      IncomeByPageCount:{}
    };
  },
  methods: {
     // 收入导出订单
    async exportOrder() {
      const params = JSON.parse(JSON.stringify(this.shouruSearchForm));
      params.pageNumber = 1;
      params.pageSize = 999999999;
      const result = await API_Member.getIncomePromote(params);
      if (result.success) {
        if (result.result.records.length === 0) {
          this.$Message.warning("暂无可导出数据");
          return [];
        } else {
          return result.result.records;
        }
      } else {
        this.$Message.warning("导出数据失败，请重试");
      }
    },
    // 支出导出
     async exportOrderZC() {
      const params = JSON.parse(JSON.stringify(this.shouruSearchForm));
      params.pageNumber = 1;
      params.pageSize = 999999999;
      const result = await API_Member.getBranchPromote(params);
      if (result.success) {
        if (result.result.records.length === 0) {
          this.$Message.warning("暂无可导出数据");
          return [];
        } else {
          return result.result.records;
        }
      } else {
        this.$Message.warning("导出数据失败，请重试");
      }
    },
    // 重置
    handleReset(value) {
      this.selectDate = "";
      this.shouruSearchForm = {
        // 请求参数
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        memberId: this.memberId,
        owner:this.walletType,
        start: "",
        startDate: "",
        endDate: "",
      };
      if (value == "shouru") {
        this.shouruData();
      } else {
        this.zhichu();
      }
    },
    init() {
      //收入
      this.shouruData();
    },
    memberInfoChange(v) {
      if (v == "shouru") {
        this.shouruData();
      }
      if(v=='zhichu'){
        this.shouruSearchForm={
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        memberId: this.memberId,
        owner:this.walletType,
        start: "",
        startDate: "",
        endDate: "",
      }, //充值钱包收入
        this.zhichu();
      }
    },
    // 充值钱包收入数据
    shouruData() {
      this.loading = true;
      API_Member.getIncomePromote(this.shouruSearchForm).then((res) => {
      this.loading = false;
        this.receiptRecordData = res.result.records;
        this.receiptRecordTotal = res.result.total;
        this.getIncomeByPageCountTotal();
      });
    },
    // 收入总计
    getIncomeByPageCountTotal() {
      API_Member.getIncomePromoteByPageCount(this.shouruSearchForm).then((res) => {
        this.IncomeByPageCount=res.result
      });
    },
    //收入分页
    shouruChangePage(v) {
      this.shouruSearchForm.pageNumber = v;
      this.shouruData();
    },
    //收入分页
    shouruChangePageSize(v) {
      this.shouruSearchForm.pageNumber = 1;
      this.shouruSearchForm.pageSize = v;
      this.shouruData();
    },
    //充值钱包支出数据
    zhichu(){
      this.loading = true;
      API_Member.getBranchPromote(this.shouruSearchForm).then((res) => {
      this.loading = false;
        this.receiptRecordData = res.result.records;
        this.receiptRecordTotal = res.result.total;
        this.getBranchByPageCountTotal();
      });
    },
    // 支出综合
    getBranchByPageCountTotal(){
      API_Member.getBranchPromoteByPageCount(this.shouruSearchForm).then((res) => {
        this.IncomeByPageCount=res.result
      });
    },
    // 支出分页
    zhichuChangePage() {},
    // 支出分页
    zhichuChangePageSize() {},
    // 收入起止时间从新赋值
    //充值钱包收入时间选择
    selectDateRangeShouru(v) {
      if (v) {
        this.shouruSearchForm.startDate = v[0];
        this.shouruSearchForm.endDate = v[1];
      }
    },
  },

  mounted() {
    // this.id = this.$route.query.id;
    this.init();
  },
};
</script>
<style lang="scss" scoped>
@import "../../user-partner-detail.scss";
.export-excel-wrapper {
  margin-left: 10px;
}
.totleQuota {
  margin-left: auto;
  display: flex;
  align-items: center;
  p {
    padding: 0 15px;
    box-sizing: border-box;

    span {
      color: #ff5c58;
      padding-left: 10px;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
.detailTable {
  width: 50% !important;
}
.Unbind {
  background: #f56c1d;
}
/deep/.ivu-tabs-bar {
  border: none !important;
}
.storeBtn {
  // width:30px;
  display: inline;
  padding: 8px 20px;
  box-sizing: border-box;
  border-radius: 6px;
  background: #f56c1d;
  color: #ffffff;
}
.walltMoneyNumBox {
  display: flex;
  align-items: center;
  p {
    margin-right: 20px;
  }
}
</style>
